<template>
        <section>
            <!--工具条-->
    
            <div class="section-content clearfix">
                <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                    <el-form @submit.native.prevent :inline="true" :model="filters">
                        <!-- <el-form-item style="float: left;">
                            <el-input v-model="filters.name" placeholder="设备类型" @keyup.enter.native="getUsers()"></el-input>
                        </el-form-item>
                        <el-form-item class="tool-bt">
                            <el-button type="primary" v-on:click="getUsers">查询</el-button>
                        </el-form-item>
                        <el-form-item v-if="menubt.indexOf('/device_type/post')>-1">
                            <el-button type="primary" @click="handleAdd">新增</el-button>
                        </el-form-item>
                    -->
                    </el-form>
                </el-col>
    
                <!--列表-->
                <el-table :data="query" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
                    style="width: 100%;">
                    <!-- <el-table-column type="selection">
                    </el-table-column> -->
                    <el-table-column type="index" label="序号" width="80" :index="indexMethod">
                    </el-table-column>
                    <el-table-column prop="userNickName" label="评论人" width="200">
                    </el-table-column>
                    <el-table-column prop="content" label="评论内容">
                        </el-table-column>
                    <el-table-column prop="updateTime" label="评论时间" width="200">
                        </el-table-column>
                        <!-- <el-table-column prop="remark" label="描述">
                        </el-table-column> -->
                    <el-table-column align="center" label="操作" width="200">
                        <template scope="scope">
                            <!-- <i @click="handleEdit(scope.$index, scope.row)" title="编辑" icon="el-icon-edit" circle
                                class="pb-icon icon-edit"></i> -->
                            <i @click="handleDel(scope.$index, scope.row)" icon="el-icon-delete" circle title="删除"
                                class="pb-icon icon-delete"></i>
    
                        </template>
                    </el-table-column>
    
                </el-table>
    
                <!--工具条-->
                <el-col :span="24" class="toolbar">
    
                    <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10"
                        :total="total" style="float:right;">
                    </el-pagination>
                </el-col>
            </div>
            <!--编辑界面-->
            <el-dialog title="编辑" v-show="editFormVisible" v-model="editFormVisible" @close="editFormVisible=false">
                <div slot="footer" style="text-align: left; ">
                    <el-form @submit.native.prevent :model="editForm" label-width="80px" :rules="editFormRules"
                        ref="editForm">
                        <el-form-item label="类型名称" prop="name">
                            <el-input v-model="editForm.name" auto-complete="off"></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="是否默认">
                                <el-radio-group v-model="editForm.isDefault">
                                    <el-radio label="0" aria-checked="true">否</el-radio>
                                    <el-radio label="1">是</el-radio>
                                </el-radio-group>
                            </el-form-item> -->
                        <el-form-item prop="remark" label="描述">
                            <el-input v-model="editForm.remark" auto-complete="off"></el-input>
                        </el-form-item>
    
                    </el-form>
                    <div slot="footer" class="dialog-footer" style="text-align:right;">
                        <el-button @click.native="editFormVisible = false">取消</el-button>
                        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
                    </div>
                </div>
            </el-dialog>
    
            <!--新增界面-->
            <el-dialog title="新增" v-show="addFormVisible" v-model="addFormVisible" @close="addFormVisible=false">
                <div slot="footer" style="text-align: left; ">
                    <el-form @submit.native.prevent :model="addForm" label-width="100px" :rules="addFormRules"
                        ref="addForm">
                        <el-form-item label="类型名称" prop="name">
                            <el-input v-model="addForm.name" auto-complete="off"></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="是否默认">
                                <el-radio-group v-model="addForm.isDefault">
                                    <el-radio label="0" aria-checked="true">否</el-radio>
                                    <el-radio label="1">是</el-radio>
                                </el-radio-group>
                            </el-form-item> -->
                        <el-form-item prop="remark" label="描述">
                            <el-input v-model="addForm.remark" auto-complete="off"></el-input>
                        </el-form-item>
    
    
                    </el-form>
                    <div slot="footer" class="dialog-footer" style="text-align: right;">
    
                        <el-button @click.native="addFormVisible = false">取消</el-button>
                        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
                    </div>
                </div>
            </el-dialog>
        </section>
    </template>
    
    <script>
        // import util from './../common/js/util'
        //import NProgress from 'nprogress'
        import {
            cms_comment_query,
            cms_comment_post,
            cms_comment_put,
            cms_comment_get,
            cms_comment_delete 
        } from '../../api/api';
    
        export default {
            data() {
                return {
                    articleId:'',
                    filters: {
                        name: ''
                    },
                    nature: 1,
                    query: [],
                    total: 0,
                    page: 1,
                    listLoading: false,
                    sels: [], //列表选中列
                    editFormVisible: false, //编辑界面是否显示
                    editLoading: false,
                    editFormRules: {
                        name: [{
                            required: true,
                            message: '请输入类型名称',
                            trigger: 'blur'
                        }, {
                            min: 1,
                            max: 20,
                            message: '长度在 1 到 20 个字符',
                            trigger: 'blur'
                        }]
                    },
                    //编辑界面数据
                    editForm: {
                        id: '',
                        name: '',
                        isDefault: '',
                        remark: '',
                        deviceTypeAttrFormList: [{
                            'attrId': '',
                            'attrValue': '',
                            'attrRemark': '',
                            'unit': '',
                            'value_kind': ''
    
                        }]
                    },
    
                    addFormVisible: false, //新增界面是否显示
                    addLoading: false,
                    addFormRules: {
                        name: [{
                            required: true,
                            message: '请输入类型名称',
                            trigger: 'blur'
                        }, {
                            min: 1,
                            max: 20,
                            message: '长度在 1 到 20 个字符',
                            trigger: 'blur'
                        }],
                        path: [{
                                required: true,
                                message: '请输入path',
                                trigger: 'blur'
                            }
    
                        ]
                    },
                    //新增界面数据
                    addForm: {
                        name: '',
                        isDefault: '1',
                        remark: '',
                        deviceTypeAttrFormList: [{
                            'attrId': '',
                            'attrValue': '',
                            'attrRemark': '',
                            'unit': '',
                            'value_kind': ''
                        }]
    
                    }
    
                }
            },
            methods: {
                indexMethod(index) {
                    let num = (this.page - 1) * 10 + index + 1;
                    return num;
                },
                deviceSlaveListdel(s) {
                    this.addForm.deviceTypeAttrFormList.splice(s, 1)
                },
                deviceSlaveListdel1(s) {
                    console.log(this.editForm.deviceTypeAttrFormList)
                    this.editForm.deviceTypeAttrFormList.splice(s, 1)
                },
                natureadd(d) {
                    let s = {
                        'attrId': '',
                        'attrValue': '',
                        'attrRemark': '',
                        'unit': '',
                        'value_kind': ''
                    }
                    if (d == 1) {
                        if (this.addForm.deviceTypeAttrFormList.length <= 20) {
    
                            this.addForm.deviceTypeAttrFormList.push(s)
                        } else {
                            this.$message({
                                message: '最多只能添加20个属性',
                                type: 'warning'
                            });
                        }
                    } else {
                        if (this.editForm.deviceTypeAttrFormList.length <= 20) {
                            this.editForm.deviceTypeAttrFormList.push(s)
                        } else {
                            this.$message({
                                message: '最多只能添加20个属性',
                                type: 'warning'
                            });
                        }
                    }
    
                    console.log(this.editForm.deviceTypeAttrFormList)
                },
                //性别显示转换
                formatSex: function (row, column) {
                    return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
                },
                handleCurrentChange(val) {
                    this.page = val;
                    this.getUsers();
                },
                //获取菜单列表
                getUsers() {
                  
                    let para = {
                        pageNo: this.page,
                        pageSize: 10,
                        // name: this.filters.name,
                        conId:this.articleId
                    };
                    this.listLoading = true;
                    //NProgress.start();
                    cms_comment_query(para).then((res) => {
                        this.total = res.data.totalCount;
                        this.query = res.data.list;
                        this.listLoading = false;
                        this.page = res.data.pageNo;
                        //NProgress.done();
                    });
                },
                //删除
                handleDel: function (index, row) {
    
                    this.$confirm('确认删除该评论吗?', '提示', {
                        type: 'warning'
                    }).then(() => {
                        this.listLoading = true;
                        //NProgress.start();
                        let para = {
                           id: row.commentId
                        };
                        cms_comment_delete(para).then((res) => {
                            this.listLoading = false;
                            if (res.code == 0) {
    
                                //NProgress.done();
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                this.getUsers();
    
                            } else {
                                this.$message({
                                    message: res.message,
                                    type: 'warning'
                                });
                            }
                        });
                    }).catch(() => {
    
                    });
                },
                //显示编辑界面
                handleEdit: function (index, row) {
    
                    let para = {
                        id: row.id
                    };
                    this.editForm = row;
    
                    this.editFormVisible = true;
                    // device_type_get(para).then((res) => {
    
                    //      this.begCode(res.code,res.message);
                    //     if (res.code == 0) {
    
                    //         this.editFormVisible = true;
                    //         this.editForm = {
                    //             id: res.data.id,
                    //             name: res.data.name,
                    //             isDefault: res.data.isDefault,
                    //             remark: res.data.remark,
                    //             deviceTypeAttrFormList: res.data.deviceTypeAttrList
                    //         }
                    //         this.editForm.isDefault = this.editForm.isDefault.toString();
    
                    //     }
                    // });
    
                    // this.editForm.deviceTypeAttrFormList= [{'attrId':'','attrValue':'','attrRemark':''}];
                },
                //显示新增界面
                handleAdd: function () {
    
                    this.nature = 1;
                    this.addFormVisible = true;
                    this.addForm = {
    
                        name: '',
                        remark: '',
                        systemId: this.systemId,
                        alias: "news",
                        categoryId: "",
                        // description: "时事类目",
                        type: this.systemId
                    };
                },
                //编辑
                editSubmit: function () {
                    console.log(1)
                    this.$refs.editForm.validate((valid) => {
                        console.log(valid)
                        if (valid) {
                            this.$confirm('确认提交吗？', '提示', {}).then(() => {
                                this.editLoading = true;
                                //NProgress.start();
                                let para = Object.assign({}, this.editForm);
    
                                cms_comment_put(para).then((res) => {
    
                                    this.editLoading = false;
                                    this.begCode(res.code, res.message);
                                    if (res.code == 0) {
                                        //NProgress.done();
                                        this.$message({
                                            message: '提交成功',
                                            type: 'success'
                                        });
                                        this.$refs['editForm'].resetFields();
                                        this.editFormVisible = false;
                                        this.getUsers();
                                    }
                                });
                            });
                        }
                    });
                },
                //新增
                addSubmit: function () {
                    this.$refs.addForm.validate((valid) => {
                        if (valid) {
                            this.$confirm('确认提交吗？', '提示', {}).then(() => {
                                this.addLoading = true;
                                //NProgress.start();
                                // for (let i in this.addForm.deviceTypeAttrFormList) {
                                //     if (!this.addForm.deviceTypeAttrFormList[i].attrRemark) {
                                //         this.addForm.deviceTypeAttrFormList.splice(i, 1)
                                //     }
                                // }
    
                                let para = Object.assign({}, this.addForm);
                                    console.log(this.addForm)
                                    this.addLoading = false;
                                    cms_comment_post(para).then((res) => {
    
                                    this.begCode(res.code, res.message);
                                    //NProgress.done();
    
                                    if (res.code == 0) {
                                        this.$message({
                                            message: '提交成功',
                                            type: 'success'
                                        });
                                        this.$refs['addForm'].resetFields();
                                        this.addFormVisible = false;
                                        this.getUsers();
                                    }
                                });
                            });
                        }
                    });
                },
                selsChange: function (sels) {
                    this.sels = sels;
                },
                //批量删除
                batchRemove: function () {
    
                    var ids = this.sels.map(item => item.id).toString();
                    this.$confirm('确认删除选中记录吗？', '提示', {
                        type: 'warning'
                    }).then(() => {
                        this.listLoading = true;
                        //NProgress.start();
                        let para = {
                            idList: ids
                        };
                        cms_comment_delete(para).then((res) => {
    
                            this.begCode(res.code, res.message);
                            this.listLoading = false;
                            //NProgress.done();
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getUsers();
                        });
                    }).catch(() => {
    
                    });
                }
            },
            mounted() {
                this.articleId = sessionStorage.getItem('articleId');
                console.log(this.$route.query)
                this.systemId = location.href.split("article/typelist")[1];
                this.getUsers();
            }
        }
    </script>
    
    <style scoped>
    
    </style>